<template>
	<view>
		<view class="paying">
			订单当前状态： {{datalist.status | orderProcessText}}
		</view>
		<view class="order-list">
			<view class="orderitem">
				<view class="top">
					<text>订单编号:{{id}}</text>
					<text class="status">{{datalist.orderSn}}</text>
				</view>
				<view class="con">
					<image :src="datalist.productPic" mode=""></image>
					<view class="info">
						<view class="left">
							<view class="title">{{datalist.productName}}</view>
							<view class="">编号: 123456789</view>
							<view class="">规格: 暂无</view>
							<view class="color">颜色: {{color}}</view>
						</view>
						<view class="left right">
							<view class="price">￥{{datalist.productPrice}}</view>
							<view class="count">X{{datalist.productQuantity}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>时间:{{datalist.createTime}}</text>
					<text style="font-size: 32rpx;color: red;">合计: ￥{{datalist.returnAmount}}</text>
				</view>
			</view>
		</view>
		<view class="form">
			<form @submit="formSubmit">
				<view class="item uni-form-item uni-column">
					<view class="title">退单金额</view>
					<view style="line-height: 80rpx;color: red;font-size: 32rpx;" class="con">￥: {{datalist.returnAmount}}</view>
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">退货原因</view>
					<view class="con-item">
						{{datalist.description?datalist.description:'无退款原因'}}
					</view>
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">退货地址</view>
					<view class="con-item">
						{{address?address:"未选择收获地址"}}
					</view>
				</view>
				<view class="item uni-form-item uni-column">
					<view class="title">详细理由</view>
					<view class="con-item">
						{{datalist.description?datalist.descriptionZ:"无详细理由"}}
					</view>
				</view>
				<view class="upload">
					<view class="pointout">
						上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
					</view>

					<view class="images">
						<view v-for="(item,index) in imgList" class="image">
							<image :src="item" mode=""></image>
							<uni-icons @click='delimage(index)' class="icon" style="color: red;" type="clear" size="20"></uni-icons>
						</view>



					</view>
				</view>
			</form>

		</view>


	</view>
</template>

<script>
	import {
		addOrderReturnApply,
		getCompanyAddrss,
		orderReturnApplys,
		uploadImg,
		orderReturn
	} from "../../../../api/my/backgoods/backgoods.js"
	import baseUrl from "@/api/baseUrl.js"
	export default {
		data() {
			return {
				datalist: '',
				array: [],
				index: 0,
				addresslist: '',
				id: '',
				createTime: '',
				totalAmount: "",
				imgList: [],
				imageslist: [],
				address: '',
				color:""
			};
		},
		filters: {
			orderProcessText(process) {
				var text = "等待处理";
				switch (JSON.stringify(process)) {
					case "0":
						text = "等待处理";
						break;
					case "1":
						text = "确认退货,等待发货";
						break;
					case "2":
						text = "已退款";
						break;
					case "3":
						text = "已拒绝";
						break;
					case "9":
						text = "拒绝退货";
						break;

					default:
						break;
				}
				return text;
			},
		},
		methods: {
			// 点击小图标删除上传的图片
			delimage(index) {
				this.imgList.splice(index, 1)
			},
			// 上传图片
			orderReturn() {

			},
			// 选择图片
			uploadImg() {

			},
			// 切换收货地址
			bindPickerChange(e) {},
			// 提交
			formSubmit(e) {

			}
		},
		onLoad(e) {
			console.log(e.id);
			orderReturn(e.id).then(res => {
				console.log(res);
				this.datalist = res.data.orderReturnApply
				this.color=JSON.parse(res.data.orderReturnApply.productAttr)[0].value
			})


			// 获取退货公司地址
			getCompanyAddrss().then(res => {
				console.log(res);
				this.addresslist = res.data.items
				var index = res.data.items.findIndex(el => {
					return el.id == this.datalist.companyAddressId
				})
				var el = res.data.items[index]
				this.address = el.city + el.province + el.region + el.detailAddress + el.addressName
			})
		}
	}
</script>

<style lang="scss" scoped>
	.picker {
		padding-right: 20rpx;
		color: #666;
		width: 500rpx;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	button {
		width: 710rpx;
		margin: 20rpx auto;
		margin-bottom: 60rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.form {
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 12rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 40rpx 0;

		.item {
			width: 710rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.title {
				width: 200rpx;
				line-height: 80rpx;
				box-sizing: border-box;

			}

			input {
				font-size: 26rpx;
				text-indent: 20rpx;
				width: 600rpx;
				height: 80rpx;
				border: 2rpx solid #eee;
				box-sizing: border-box;
				border-radius: 12rpx;
			}

			textarea {
				font-size: 26rpx;
				border: 2rpx solid #eee;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
			}
		}
	}

	.paying {
		width: 710rpx;
		margin: 0rpx auto;
		margin-bottom: 20rpx;
		margin: 20rpx;
		box-sizing: border-box;
		text-indent: 20rpx;
		border-bottom: 2rpx solid #e5e5e5;
		background-color: #fff;
		border-radius: 12rpx;
		line-height: 106rpx;
	}

	.orderitem {
		width: 710rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		margin: 40rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #eee;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #3e3e3e;

			.status {
				color: #034c46;
				box-sizing: border-box;
			}
		}

		.con {
			padding: 30rpx 0;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 2rpx solid #eee;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
			}

			.info {
				width: 460rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.left {
					font-size: 22rpx;
					box-sizing: border-box;
					line-height: 30rpx;
					color: #8d8d8d;

					.title {
						width: 300rpx;
						font-size: 26rpx;
						color: #3e3e3e;
						line-height: 58rpx;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.right {
					text-align: right;
					box-sizing: border-box;

					.price {
						margin-top: 20rpx;
						font-size: 28rpx;
						box-sizing: border-box;
					}

					.count {
						margin-top: 10rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			line-height: 36rpx;
			box-sizing: border-box;
		}

		.btns {
			padding: 12rpx 0;
			box-sizing: border-box;
			height: 80rpx;

			.btn {
				height: 54rpx;
				line-height: 50rpx;
				float: right;
				margin-left: 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				border: 2rpx solid #2d4f43;
				color: #2d4f43;
				background-color: rgba(0, 0, 0, 0);
			}
		}

	}

	.upload {
		box-sizing: border-box;
		width: 670rpx;
		height: 300rpx;
		margin: 20rpx auto;
		border: 2rpx solid #eee;
		padding: 40rpx;
		border-radius: 12rpx;

		.pointout {
			font-size: 24rpx;
		}

		.images {
			margin-top: 40rpx;

			.upimage {
				width: 120rpx;
				height: 120rpx;
				text-align: center;
				font-size: 24rpx;
				border: 2rpx solid #eee;
				float: left;
			}

			.image {
				width: 120rpx;
				height: 120rpx;
				position: relative;
				float: left;
				margin-right: 34rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					float: left;

				}

				.icon {
					position: absolute;
					top: -25rpx;
					right: -25rpx;
				}

			}
		}

	}

	.orderitem {
		margin-top: 20rpx;
		box-sizing: border-box;
	}
</style>
